<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>发光文字跟随鼠标移动</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <!-- 光标 -->
  <div class="cursour"></div>
</body>

<script>
  let cursour = document.querySelector('.cursour')
  let body = document.querySelector('body')

  document.onmousemove = function(e) {
    cursour.style.top = e.pageY + 'px'
    cursour.style.left = e.pageX + 'px'

    body.style.backgroundPositionX = e.pageX / -4 + 'px'
    body.style.backgroundPositionY = e.pageY / -4 + 'px'

    let element = document.createElement('div')
    element.className = 'element'
    body.prepend(element)

    element.style.left = cursour.getBoundingClientRect().x + 'px'
    element.style.top = cursour.getBoundingClientRect().y - 20 + 'px'

    setTimeout(() => {
      let text = document.querySelectorAll('.element')[0]

      directionX = Math.random() < .5 ? -1 : 1
      directionY = Math.random() < .5 ? -1 : 1

      text.style.left = parseInt(text.style.left) - (directionX * (Math.random() * 200)) + 'px'
      text.style.top = parseInt(text.style.top) - (directionX * (Math.random() * 200)) + 'px'
      text.style.opacity = 0
      text.style.transform = 'scale(0.25)'
      text.innerHTML = randomText()

      setTimeout(() => {
        element.remove()
      }, 1000);
    }, 10);
  }

  function randomText() {
    const text = 'abcdefghijklmnopqrstuvwxyz1234567890'.split('')

    return text[parseInt(Math.random() * text.length)]
  }
</script>

</html>